<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>提示</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var HISUIStyleCode = 'blue';
    </script>
</head>
<body>
	<h2>提示</h2>
	<h3>说明:</h3>
    <span>当用户点击或者鼠标悬停在此区域，将会显示提示。</span>
	<h3>如：</h3>
	<div class="demo-exp-code entry-content"> 
		<a id="tt1" href="javascript:void(0);" onclick="javascript:void(0);" title="这是提示信息" class="hisui-tooltip" data-options="position:'right'">
			鼠标移动到这
		</a>
	  	<a id="btn" class='hisui-linkbutton' href="javascript:void(0)" style='margin-left: 200px'>点我提示</a>
		<pre class="prettyprint hide lang-html"><code>&lt;a id="tt1" href="#" title="这是提示信息" class="hisui-tooltip" data-options="position:'right'">鼠标移动到这(点击试试)&lt;/a></code></pre>
		<pre class="prettyprint hide lang-js">
$(function(){
	$("#btn").click(function(){
		$HUI.tooltip("#tt1",{position:'bottom'}).show();
		//等价 
		//$("#tt1").tooltip({position:'bottom'}).tooltip('show');
	});
});</pre>
	</div>
	<script type="text/javascript">
		$(function(){
			/*var tt = $HUI.tooltip('#tt',{
				content:'<span style="color:#fff;">这是通过js提示的</span>',
				position: 'bottom'
				,deltaX:50
			});*/
			$("#btn").click(function(){
				$HUI.tooltip("#tt1",{position:'bottom'}).show();
				//$("#tt1").tooltip({position:'bottom'}).tooltip('show');

			});
		});
  </script>	
  <table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>position</td>
			<td>提示层的位置</td>
			<td>bottom</td>
			<td>可选值：'top' , 'right', 'bottom', 'left'</td>
		</tr>
		<tr>
			<td>tipWidth</td>
			<td>提示层的宽度</td>
			<td>undefined</td>
			<td>默认为undefined,宽度自动<code>(20210105)</code></td>
		</tr>
	</table>
  <prettyprint/>
</body>
</html>